<template>
	<el-card class="box-card">
		<el-steps :active="1" align-center>
		  <el-step title="基础信息"></el-step>
		  <el-step title="商户位置"></el-step>
		  <el-step title="联系方式"></el-step>
		  <el-step title="门头照"></el-step>
		  <el-step title="资质信息照片上传"></el-step>
		  <el-step title="资质信息"></el-step>
		  <el-step title="银行账号信息照片上传"></el-step>
		  <el-step title="银行账号信息"></el-step>
		</el-steps>
		<el-row class="box-row">
			<el-form :model="formData" ref="formData">
				<el-row>
					<el-col :span="8">
						<el-row>
							<el-col :span="20">
								<el-input v-model="shopAddress" placeholder="输入地址，选择商户位置"></el-input>
							</el-col>
							<el-col :span="4">
								<el-button type="primary" icon="search" @click="find">查询</el-button>
							</el-col>
						</el-row>
						
						<el-row class="resultMap">
							<el-col :span="24" >
								<div v-for="item in names" class="itemMap" @click="showOver(item)">{{item.address}}</div>
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="16">
						<div id="allmap"></div>
					</el-col>
				</el-row>
				<el-form-item prop="customerAddress" style="margin-top: 10px;">
					<el-input v-model="formData.customerAddress" placeholder="输入商户详细地址"></el-input>
				</el-form-item>
				<el-form-item style="text-align: left;">
					<el-select v-model="formData.areaId" placeholder="行政区" @change="changChild">
						<el-option v-for="item in areaList" :key="item.id" :label="item.value" :value="item.id">
						</el-option>
					</el-select>
					<el-select v-model="formData.bizId" placeholder="商圈">
						<el-option v-for="item in bdList" :key="item.id" :label="item.value" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<el-button type="primary" style="width:50%;margin-top: 10px;" @click="submitForm('formData')">下一步</el-button>
		</el-row>
	</el-card>
</template>

<script>
	import { metaList ,customerUpdate,customerInfo} from '@/api/getData'
	export default {
		data() {
			return {
				local: null,
				map: null,
				shopAddress:"",
				formData: {
					id: "",
					customerAddress:"",
					areaId:"",
					bizId:"",
					longitude:"",
					latitude:"",
					currentStep:"2",
				},
				names: [],
				areaList:[],
				bdList:[],
			}
		},
		mounted() {
			this.formData.id = this.$route.query.id;
			this.metaList();
			let _this = this;
			// 百度地图API功能
			_this.map = new BMap.Map("allmap"); // 创建地图实例
			_this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
			let options = {
				onSearchComplete: function(results) {
					_this.names = [];
					// 判断状态是否正确
					for(var i = 0; i < results.getCurrentNumPois(); i++) {
						_this.names.push(results.getPoi(i));
					}
				}
			};
			_this.local = new BMap.LocalSearch(_this.map, options);
		},
		methods: {
			async customerInfo(id) {
				const res = await customerInfo({
					id: id,
				});
				if(res.code == "0") {
					this.changChild(res.obj.areaId);
					this.formData.customerAddress = res.obj.customerAddress;
					this.formData.longitude  = res.obj.longitude;
					this.formData.latitude  = res.obj.latitude;
					this.formData.areaId  = res.obj.areaId;
					this.formData.bizId  = res.obj.bizId;
					
				} else {
					this.$notify.error({
						title: '错误',
						message: res.msg,
						offset: 100
					});
				}
			},
			changChild(id) {
				let _this = this;
				this.areaList.forEach(function(item) {
					if(item.id == id) {
						_this.bdList = item.childList;
						return false;
					}
				});
			},
			find: function() {
				this.local.search(this.shopAddress);
			},
			showOver: function(item) {
				console.log(item);
				this.formData.customerAddress = item.address;
				this.formData.latitude = item.point.lat;
				this.formData.longitude = item.point.lng;
				let point = new BMap.Point(item.point.lng, item.point.lat)
				this.map.centerAndZoom(point, 15);
				let marker = new BMap.Marker(new BMap.Point(item.point.lng, item.point.lat));
				this.map.addOverlay(marker);
				var opts = {
					width: 200, // 信息窗口宽度
					height: 100, // 信息窗口高度
					title: item.title, // 信息窗口标题
				}
				let infoWindow = new BMap.InfoWindow("地址：" + item.address, opts); // 创建信息窗口对象 
				this.map.openInfoWindow(infoWindow, point); //开启信息窗口
			},
			async metaList() {
				const res = await metaList({
					type: "address",
					pageSize: "500",
					pageNum: "1",
				});
				if(res.code == "0") {
					let parentList = [];
					res.list.rows.forEach(function(item) {
						if(item.parentId == null || item.parentId == "") {
							item.childList = [];
							parentList.push(item);
						}
					});
					res.list.rows.forEach(function(item) {
						parentList.forEach(function(obj) {
							if(item.parentId == obj.id) {
								obj.childList.push(item);
							}
						});
					});
					this.areaList = parentList;
					if(this.formData.id != undefined && this.formData.id != ""){
						this.customerInfo(this.formData.id);//查询信息
					}
				} else {
					this.$notify.error({
						title: '错误',
						message: res.msg,
						offset: 100
					});
				}
			},
			async submitForm(formName) {
				
				this.$refs[formName].validate(async(valid) => {
					if(valid) {
						if(this.formData.customerAddress == ""){
							this.$notify.error({
								title: '提示',
								message: "请输入商户详细地址",
								offset: 100
							});
							return false;
						}else if(this.formData.customerAddress.length > 50){
							this.$notify.error({
								title: '提示',
								message: "商户详细地址最大50个字符",
								offset: 100
							});
							return false;
						}
						if(this.formData.latitude == "" || this.formData.longitude == "" ){
							this.$notify.error({
								title: '提示',
								message: "请定位商户经纬度",
								offset: 100
							});
							return false;
						}
						let res = await customerUpdate(this.formData);

						if(res.code == "0") {
							this.$router.push({
								path: 'businessThree',
								query: {
									id: res.id
								}
							})
						} else {
							this.$notify.error({
								title: '错误',
								message: res.msg,
								offset: 100
							});
						}
					}
				});
			},
		},
	}
</script>

<style scoped>
	.box-card {
		margin: 0 10px;
	}
	
	.title {
		background-color: #20a0ff;
		line-height: 60px;
		font-size: 18px;
		color: #fff;
		width:50%;
		margin: 10px auto;
	}
	.box-row{
		margin: 20px auto;
		width:100%;
		text-align: center;
	}
	#allmap {
		height: 300px;
		width: 100%;
	}
	
	.resultMap {
		height: 265px;
		overflow: auto;

	}
	.itemMap {
		line-height: 30px;
		cursor: pointer;
		margin: 10px 0;
		padding-left: 10px;
	}
	.el-button{
		padding:12px 15px;
	}
</style>